﻿@using YoYoCms.AbpProjectTemplate.Localization
@using YoYoCms.AbpProjectTemplate.Web.Navigation
@{
    ViewBag.CurrentPageName = PageNames.Frontend.Home;
}
@section Styles
{
 }
 
<section id="slider">

    <div id="rev_slider_8_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="particle-effect-three6" data-source="gallery" style="background:#ffffff;padding:0px;">
        <!-- START REVOLUTION SLIDER 5.4.1 fullscreen mode -->
        <div id="rev_slider_8_1" class="rev_slider fullscreenbanner" style="display:none;" data-version="5.4.1">
            <ul>	<!-- SLIDE  -->
                <li data-index="rs-16" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="Power4.easeOut" data-easeout="Power4.easeOut" data-masterspeed="default"  data-thumb="http://works.themepunch.com/revolution_5_3/wp-content/"  data-rotate="0"  data-saveperformance="off"  data-title="Example One" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
                    <!-- MAIN IMAGE -->
                    <img src="js/plugins/revolution/assets/images/transparent.png" data-bgcolor='#ffffff' style='background:#ffffff' alt=""  data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off" class="rev-slidebg" data-no-retina>
                    <!-- LAYERS -->

                    <!-- LAYER NR. 1 -->
                    <div class="tp-caption  " 
                         id="slide-16-layer-15" 
                         data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
                         data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" 
                         data-width="full-proportional"
                         data-height="full-proportional"
                         data-whitespace="nowrap"
		 
                         data-type="image" 
                         data-basealign="slide" 
                         data-responsive_offset="off" 
                         data-responsive="off"
                         data-frames='[{"delay":500,"speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                         data-textAlign="['inherit','inherit','inherit','inherit']"
                         data-paddingtop="[0,0,0,0]"
                         data-paddingright="[0,0,0,0]"
                         data-paddingbottom="[0,0,0,0]"
                         data-paddingleft="[0,0,0,0]"
                         data-blendmode="overlay"

                         style="z-index: 5;"><img src="js/plugins/revolution/assets/images/blurbg7.jpg" alt="" data-ww="['full-proportional','full-proportional','full-proportional','full-proportional']" data-hh="['full-proportional','full-proportional','full-proportional','full-proportional']" width="1920" height="1080" data-no-retina> </div>

                    <!-- LAYER NR. 2 -->
                    <div class="tp-caption   tp-resizeme  blurslider-gradient" 
                         id="slide-16-layer-6" 
                         data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
                         data-y="['middle','middle','middle','middle']" data-voffset="['-110','-110','-130','-130']" 
                         data-fontsize="['60','60','40','40']"
                         data-lineheight="['80','80','60','60']"
                         data-width="none"
                         data-height="none"
                         data-whitespace="nowrap"
		 
                         data-type="text" 
                         data-responsive_offset="on" 
                         data-wrapper_class="tp-nopointer" 

                         data-frames='[{"delay":500,"speed":1000,"frame":"0","from":"sX:2;sY:3;opacity:0;fb:10px;","to":"o:1;fb:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;fb:0;","ease":"Power3.easeInOut"}]'
                         data-textAlign="['center','center','center','center']"
                         data-paddingtop="[0,0,0,0]"
                         data-paddingright="[0,0,0,0]"
                         data-paddingbottom="[0,0,0,0]"
                         data-paddingleft="[0,0,0,0]"

                         style="z-index: 6; white-space: nowrap; font-size: 60px; line-height: 80px; font-weight: 400; color: rgba(4,37,60,1);font-family:Poppins;letter-spacing:10px;">GEOMETRIC<br/>DESIGN  </div>

                    <!-- LAYER NR. 3 -->
                    <div class="tp-caption   tp-resizeme" 
                         id="slide-16-layer-8" 
                         data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
                         data-y="['middle','middle','middle','middle']" data-voffset="['30','30','0','0']" 
                         data-width="['460','461','360','330']"
                         data-height="none"
                         data-whitespace="normal"
		 
                         data-type="text" 
                         data-responsive_offset="on" 
                         data-wrapper_class="tp-nopointer" 

                         data-frames='[{"delay":700,"speed":1000,"frame":"0","from":"y:20px;sX:2;sY:3;opacity:0;fb:10px;","to":"o:1;fb:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":600,"frame":"999","to":"auto:auto;fb:0;","ease":"Power3.easeInOut"}]'
                         data-textAlign="['center','center','center','center']"
                         data-paddingtop="[0,0,0,0]"
                         data-paddingright="[0,0,0,0]"
                         data-paddingbottom="[0,0,0,0]"
                         data-paddingleft="[0,0,0,0]"

                         style="z-index: 7; min-width: 460px; max-width: 460px; white-space: normal; font-size: 15px; line-height: 25px; font-weight: 400; color: rgba(4,37,60,1);font-family:Poppins;letter-spacing:10px;">BUILD WITH THE FREE PARTICLE EFFECTS ADDON FOR SLIDER REVOLUTION </div>

                    <!-- LAYER NR. 4 -->
                    <a class="tp-caption rev-btn  tp-resizeme  blurslider-button" 
                       href="https://revolution.themepunch.com/direct-customer-benefits/#addoninstall" target="_blank"			 id="slide-16-layer-17" 
                       data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
                       data-y="['middle','middle','middle','middle']" data-voffset="['140','140','110','110']" 
                       data-width="none"
                       data-height="none"
                       data-whitespace="nowrap"
		 
                       data-type="button" 
                       data-actions=''
                       data-responsive_offset="on" 

                       data-frames='[{"delay":900,"speed":1000,"frame":"0","from":"y:100px;sX:2;sY:3;opacity:0;fb:20px;","to":"o:1;fb:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":600,"frame":"999","to":"auto:auto;fb:0;","ease":"Power3.easeInOut"},{"frame":"hover","speed":"200","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;fb:0;","style":"c:rgba(255,255,255,1);"}]'
                       data-textAlign="['inherit','inherit','inherit','inherit']"
                       data-paddingtop="[0,0,0,0]"
                       data-paddingright="[35,35,35,35]"
                       data-paddingbottom="[0,0,0,0]"
                       data-paddingleft="[35,35,35,35]"
                       data-blendmode="multiply"

                       style="z-index: 8; white-space: nowrap; font-size: 15px; line-height: 50px; font-weight: 400; color: rgba(255,255,255,1);font-family:Poppins;background-color:rgba(4,37,60,1);outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;letter-spacing:3px;cursor:pointer;text-decoration: none;">GET ADDONS </a>
                </li>
            </ul>
            <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>	</div>
    </div><!-- END REVOLUTION SLIDER -->
    <script type="text/javascript">
		
        var tpj=jQuery;
        var revapi8;
        tpj(document).ready(function() {
            if(tpj("#rev_slider_8_1").revolution == undefined){
                revslider_showDoubleJqueryError("#rev_slider_8_1");
            }else{
                revapi8 = tpj("#rev_slider_8_1").show().revolution({
                    sliderType:"hero",
                    jsFileLocation:"revolution/js/",
                    sliderLayout:"fullscreen",
                    dottedOverlay:"none",
                    delay:9000,
                    particles: {startSlide: "first", endSlide: "last", zIndex: "1",
                        particles: {
                            number: {value: 300}, color: {value: "#000000"},
                            shape: {
                                type: "circle", stroke: {width: 0, color: "#ffffff", opacity: 1},
                                image: {src: ""}
                            },
                            opacity: {value: 0.1, random: false, min: 0.25, anim: {enable: false, speed: 1, opacity_min: 0, sync: false}},
                            size: {value: 1, random: true, min: 0.5, anim: {enable: false, speed: 40, size_min: 1, sync: false}},
                            line_linked: {enable: true, distance: 80, color: "#000000", opacity: 0.35, width: 1},
                            move: {enable: true, speed: 1, direction: "right", random: true, min_speed: 3, straight: false, out_mode: "out"}},
                        interactivity: {
                            events: {onhover: {enable: true, mode: "repulse"}, onclick: {enable: true, mode: "bubble"}},
                            modes: {grab: {distance: 400, line_linked: {opacity: 0.5}}, bubble: {distance: 400, size: 100, opacity: 1}, repulse: {distance: 75}}
                        }
                    },
                    navigation: {
                    },
                    responsiveLevels:[1240,1024,778,480],
                    visibilityLevels:[1240,1024,778,480],
                    gridwidth:[1240,1024,778,480],
                    gridheight:[868,768,960,720],
                    lazyType:"none",
                    parallax: {
                        type:"scroll",
                        origo:"slidercenter",
                        speed:400,
                        levels:[5,10,15,20,25,30,35,40,45,46,47,48,49,50,0,55],
                    },
                    shadow:0,
                    spinner:"spinner0",
                    autoHeight:"off",
                    fullScreenAutoWidth:"off",
                    fullScreenAlignForce:"off",
                    fullScreenOffsetContainer: "",
                    fullScreenOffset: "0px",
                    disableProgressBar:"on",
                    hideThumbsOnMobile:"off",
                    hideSliderAtLimit:0,
                    hideCaptionAtLimit:0,
                    hideAllCaptionAtLilmit:0,
                    debugMode:false,
                    fallbacks: {
                        simplifyAll:"off",
                        disableFocusListener:false,
                    }
                });
            }

            RsParticlesAddOn(revapi8);
        });	/*ready*/
    </script>


</section>
	